<?php
require_once('../utils/config.php');
session_start();
if(empty($_SESSION['facebook_id']))
	die("Not logged into facebook.");
$facebook_id = $_SESSION['facebook_id'];

?>
<html>
	<head>
		<link rel="stylesheet" type="text/css" href="../css/ui-lightness/jquery-ui-1.8.14.custom.css" />
		<link rel="stylesheet" type="text/css" href="../css/cardGrid.css" />
		<script type="text/javascript" src=<?=LIB_JQUERY;?>></script>
		<script type="text/javascript" src="../js/jquery.quicksand.js"></script>
		<script type="text/javascript" src="../js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
		<script>
			function updateCardClickBinding() {
				$('.card').click(function() {
					var cardImageBack = $(this).find('.card_image img').attr('src');
					var cardImageFront = cardImageBack
						.replace(' 3_b',  ' 1_f')
						.replace(' 7_b',  ' 5_f')
						.replace(' 11_b', ' 9_f')
						.replace(' 2_b',  '_f')
						.replace(' 4_b',  ' 3_f')
						.replace('_b',    '_f');
						
					var dialog = $(''.concat(
						'<table>',
							'<tr>',
								'<td>',
									'<img src="', cardImageBack, '" />',
								'</td>',
								'<td>',
									'<img src="', cardImageFront, '" />',
								'</td>',
							'</tr>',
						'</table>'
					));
					
					$.get(cardImageFront, function() {
						dialog.dialog({
							modal:true,
							resizable:false,
							draggable:false,
							width: 720
						});
					});
				});
			}
			
			function filter(type) {
				$.post(
					'../ajax/getCards.php',
					{
						type_filter : type,
						fb_id       : <?= $facebook_id; ?>
					},
					function(data) {
						$('.cards').quicksand(
							$(data).children('.card'),
							{
								duration  : 700,
								attribute : 'id',
								easing    : 'easeInOutQuad'
							},
							function() {
								updateCardClickBinding();
							}
						);
					}
				);
			}

			$(document).ready(function() {
				$('input[name=card_type]:radio').change(function() {
					filter($(':checked').val());
				});
				filter(0);
			});
		</script>
	</head>
	<body>
		<a href="testList.php">Back to list</a><br /><br />
		<div class="filters">
			<input type="radio" name="card_type" value="0" checked /> All <br />
			<input type="radio" name="card_type" value="1" /> Race <br />
			<input type="radio" name="card_type" value="2" /> Aspect <br />
			<input type="radio" name="card_type" value="3" /> Power <br />
			<input type="radio" name="card_type" value="10" /> Minion <br />
			<input type="radio" name="card_type" value="20" /> Bane <br />
		</div>
		<div class="card_grid">
			<ul class="cards"></ul>
		</div>
	</body>
</html>